<template>
    <div class="user-interface">
        <div class="header">
            <div class="title">医疗咨询系统</div>
            <div class="user-info">
                欢迎，{{ chatStore.currentUser.name }}
                <el-button type="danger" size="small" @click="disconnect">退出</el-button>
            </div>
        </div>

        <div class="main-container">
            <div class="sidebar">
                <div class="sidebar-section">
                    <div class="section-header">在线医生</div>
                    <div class="doctor-list">
                        <div v-for="doctor in chatStore.availableDoctors" :key="doctor.id" class="doctor-item"
                            @click="createSession(doctor.id)">
                            <el-avatar icon="UserFilled" class="avatar" />
                            <div class="doctor-info">
                                <div class="doctor-name">{{ doctor.name }}</div>
                                <div class="doctor-status">在线</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="sidebar-section">
                    <div class="section-header">我的咨询</div>
                    <div class="session-list">
                        <div v-for="session in chatStore.sessions" :key="session.sessionId" class="session-item"
                            :class="{ active: session.sessionId === chatStore.activeSessionId }"
                            @click="switchSession(session.sessionId)">
                            <el-avatar icon="UserFilled" class="avatar" />
                            <div class="session-info">
                                <div class="session-name">{{ session.doctorName }}</div>
                            </div>
                            <span class="unread-badge" v-if="session.unreadCount > 0">{{ session.unreadCount }}</span>
                        </div>
                    </div>
                </div>

            </div>

            <div class="chat-area">
                <template v-if="chatStore.activeSession">
                    <div class="chat-header">
                        <el-avatar icon="UserFilled" class="avatar" />
                        <div class="chat-title">与 {{ chatStore.activeSession.doctorName }} 医生聊天中</div>
                        <el-button type="text" icon="Close" class="close-btn"
                            @click="closeSession(chatStore.activeSession.sessionId)" />
                    </div>

                    <div class="message-list" ref="messageContainer">
                        <div v-for="msg in chatStore.activeMessages" :key="msg.timestamp" class="message-item">
                            <template v-if="msg.type === 'system'">
                                <div class="system-message">
                                    {{ msg.content }}
                                    <div class="message-time">{{ chatStore.formatTime(msg.timestamp) }}</div>
                                </div>
                            </template>
                            <template v-else>
                                <div :class="msg.isSelf ? 'my-message' : 'other-message'">
                                    <div class="message-sender">{{ msg.isSelf ? '我' : msg.senderName }}</div>
                                    <div class="message-content">{{ msg.content }}</div>
                                    <div class="message-time">{{ chatStore.formatTime(msg.timestamp) }}</div>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="message-input-area">
                        <el-input v-model="chatStore.inputMessage" placeholder="请输入您的问题..." @keyup.enter="sendMessage"
                            clearable>
                            <template #append>
                                <el-button type="primary" @click="sendMessage">发送</el-button>
                            </template>
                        </el-input>
                    </div>
                </template>

                <template v-else>
                    <div class="empty-state">
                        <el-empty description="请从左侧选择医生进行咨询" />
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onUpdated } from 'vue';
import { useChatStore } from '../../stores/chatStore';

const chatStore = useChatStore();
const messageContainer = ref(null);

const disconnect = () => {
    chatStore.disconnect();
};

const createSession = (doctorId) => {
    console.log('createSession被调用，医生ID:', doctorId); // 添加日志
    chatStore.createSession(doctorId);
    // 检查是否已连接
    if (!chatStore.connected) {
        ElMessage.error('尚未连接，请先连接服务器'); // 添加错误提示
        return;
    }
};

const switchSession = (sessionId) => {
    chatStore.switchSession(sessionId);
    // 重置未读计数
    const sessionIndex = chatStore.sessions.findIndex(s => s.sessionId === sessionId);
    if (sessionIndex !== -1) {
        chatStore.sessions[sessionIndex].unreadCount = 0;
    }
};

const closeSession = (sessionId) => {
    chatStore.closeSession(sessionId);
};

const sendMessage = () => {
    if (chatStore.activeSessionId && chatStore.inputMessage.trim()) {
        chatStore.sendMessage(chatStore.activeSessionId, chatStore.inputMessage);
    }
};

// 自动滚动到底部
onUpdated(() => {
    if (messageContainer.value) {
        messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
    }
});
</script>

<style scoped>
/* 此组件样式与医生界面基本相同，可复用大部分样式 */
/* 主要区别在于医生/用户文字和图标 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #1890ff;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.title {
    font-size: 20px;
    font-weight: bold;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-container {
    display: flex;
    height: 100%
        /* height: calc(100vh - 64px); */
}

.sidebar {
    width: 200px;
    background-color: #fff;
    /* border-right: 1px solid #e8e8e8; */
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc !important;
}

.sidebar-section {
    padding: 15px;
    border-bottom: 1px solid #e8e8e8;
}

.section-header {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    font-weight: 500;
}

.doctor-list,
.session-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.doctor-item,
.session-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.doctor-item:hover,
.session-item:hover {
    background-color: #f5f5f5;
}

.session-item.active {
    background-color: #e6f7ff;
}

.avatar {
    margin-right: 10px;
}

.doctor-name,
.session-name {
    font-size: 14px;
    font-weight: 500;
}

.doctor-status {
    font-size: 12px;
    color: #52c41a;
}

.unread-badge {
    background-color: #ff4d4f;
    color: white;
    border-radius: 10px;
    padding: 0 6px;
    font-size: 12px;
    margin-left: auto;
}

.chat-area {
    width: 600px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
}

.chat-header {
    padding: 12px 20px;
    background-color: #fff;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
}

.chat-title {
    font-size: 16px;
    font-weight: 500;
    margin-left: 10px;
    flex: 1;
}

.close-btn {
    color: #999;
}

.close-btn:hover {
    color: #ff4d4f;
}

.message-list {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.message-item {
    margin-bottom: 15px;
}

.system-message {
    text-align: center;
    color: #999;
    font-size: 12px;
    padding: 5px 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
    display: inline-block;
    margin: 0 auto;
}

.my-message {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 20%;
}

.other-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 20%;
}

.message-sender {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.message-content {
    background-color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    max-width: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.my-message .message-content {
    background-color: #e1f3ff;
}

.message-time {
    font-size: 11px;
    color: #ccc;
    margin-top: 4px;
}

.message-input-area {
    padding: 15px 20px;
    background-color: #fff;
    border: 1px solid #e8e8e8;
}

.empty-state {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc !important;
}

.user-interface {
    height: 500px;
    border: 1px solid #ccc !important;
}
</style>